<template name="create-float-page">
	<view>
		<view class="do-box">
			<view class="cover-box" @click="chooseImage">
				<image :src="imageSrc!=''?imageSrc:'../../static/img/cover-bg.gif'" mode="aspectFill"></image>
				<view class="cover-text web-font">上传封面</view>
			</view>
			<view class="do-box-check">
				<view style="display: flex;justify-content: space-around;">
					<view class="check-lable web-font" @click="check_type(1)">{{type_name}}</view>
					<view class="check-lable web-font" @click="check_type(2)">
						<icon class="mico m-location lico" style="margin-top: -10upx;"></icon>
						{{loc_name}}
					</view>
				</view>
				<input class="uni-input web-font" maxlength="10" :value="inputValue"  @input="onKeyInput"/>
			</view>
		</view>
		<view class="start-but web-font" @click="create_live_room">开始直播</view>
		<!-- 底部分享弹窗 -->
		<uni-popup ref="share" :type="type" :custom="true" @change="change">
			<view class="uni-share">
				<template v-if="popup==1">
					<text class="uni-share-title">选择频道</text>
					<view class="uni-share-content">
						<view class="type-lable" v-for="(titem,tindex) in live_type" :key="tindex" 
						@click="set_live_type(titem.type_val)" v-bind:class="[type_val==titem.type_val?'type-lable-active':'']">
							{{titem.name}}
						</view>
						<view class="ok-but" v-bind:class="[type_val==0?'ok-but-none':'']" @click="ok_but">完成</view>
					</view>
				</template>
				<template v-if="popup==2">
					<text class="uni-share-title">显示距离，可以获得更多人气</text>
					<view class="uni-share-content" style="display: block;">
						<view class="loc-lable" v-for="(litem,lindex) in loc_type" :key="lindex" 
						@click="set_loc_type(litem.loc_val)" v-bind:class="[loc_val==litem.loc_val?'loc-lable-active':'']">
							{{litem.name}}
						</view>
					</view>
					<text class="uni-share-btn" @click="cancel('share')">取消</text>
				</template>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		name: "create-float-page",
		props: {
			
		},
		components: {
			uniPopup
		},
		data() {
			return {
				imageSrc:'',
				cover_path:'',
				inputValue:'新建直播间',
				popup:1,//1选择频道 2选择位子
				type_val:0,
				type_name:'选择频道',
				loc_val:1,
				loc_name:'显示距离',
				live_type:[
					{
						type_val:1,
						name:'交友'
					},
					{
						type_val:2,
						name:'舞蹈'
					},
					{
						type_val:3,
						name:'游戏'
					},
					{
						type_val:4,
						name:'户外'
					},
					{
						type_val:5,
						name:'陪你看'
					},
					{
						type_val:6,
						name:'音乐'
					}
				],
				loc_type:[
					{
						loc_val:1,
						name:'显示距离'
					},
					{
						loc_val:2,
						name:'隐藏距离'
					}
				],
				//弹出
				type: '',
				tapTime: '',
			};
		},
		
		methods:{
			check_type:function(e){
				const t = this;
				t.popup = e;
				t.togglePopup('bottom', 'share');
			},
			set_live_type:function(e){
				const t = this;
				var index = t.live_type.findIndex(i=>i.type_val==e);
				t.type_val = t.live_type[index].type_val;
				t.type_name = t.live_type[index].name;
				console.log(t.type_val)
				console.log(t.type_name)
			},
			ok_but:function(){
				const t = this;
				if(t.type_val==0){
					return false;
				}
				t.cancel('share');
			},
			set_loc_type:function(e){
				const t = this;
				t.loc_val = e;
				var index = t.loc_type.findIndex(i=>i.loc_val==e);
				t.loc_name = t.loc_type[index].name;
				t.cancel('share');
			},
			togglePopup(type, open) {
				this.type = type
				if (open === 'tip') {
					this.show = true
				} else {
					this.$refs[open].open()
				}
				console.log(121)
				console.log(this.$refs)
			},
			cancel(type) {
				if (type === 'tip') {
					this.show = false
					return
				}
				this.$refs[type].close()
			},
			change(e) {
				console.log('是否打开:' + e.show)
			},
			onKeyInput: function(event) {
				this.inputValue = event.target.value
			},
			
			create_live_room:function(){
				const t = this;
				// 防止两次点击操作间隔太快
				var nowTime = new Date();
				if (nowTime - this.tapTime < 1000) {
					return false;
				}else{
					t.tapTime = nowTime;
				}
				if(t.cover_path==''){
					uni.showToast({
					    title: '请上传封面',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				if(t.inputValue==''){
					uni.showToast({
					    title: '请填写标题',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				if(t.type_val==0){
					uni.showToast({
					    title: '请选择类别',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				var userid = uni.getStorageSync('userid');
				uni.request({//返回系统数据
					url:t.func.api.create_live_room,
					data:{ 
						userid:userid,
						roomname:t.inputValue,
						roomcover:t.cover_path,
						type_val:t.type_val,
						loc_val:t.loc_val
					},
					method:"POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success:(res)=>{
						console.log(res)
						if(res.data.data.msg==1){
							var room = res.data.data.room;
							var url = '/pages/live/room?type=create&roomName=' + room.roomname + '&userName=' + '张三' + '&pureAudio=' + false+'&roomID='+room.rid;
							console.log(url)
							uni.redirectTo({
							    url: url
							});
						}else{
							uni.showToast({
							    title: res.data.data.tex,
							    duration: 2000,
								icon:'none'
							});
							var room = res.data.data.room;
							var url = '/pages/live/room?type=create&roomName=' + room.roomname + '&userName=' + '张三' + '&pureAudio=' + false+'&roomID='+room.rid;
							console.log(url)
							uni.redirectTo({
							    url: url
							});
							return false;
						}
					}	
				})
			},
			chooseImage: function() {
				const t = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (res) => {
						var imageSrc = res.tempFilePaths[0];
						this.imageSrc = imageSrc;
						console.log('本地路径')
						console.log(imageSrc)
						uni.uploadFile({
							url: t.func.api.upload_img,
							filePath: imageSrc,
							name: 'upfile',
							formData: {
								
							},
							success: (s) => {
								var m = JSON.parse(s.data);
								console.log(m)
								if(m.data.path){
									t.cover_path = m.data.path;
									console.log('上传成功')
									console.log(t.imageSrc)
									console.log(t.cover_path)
								}else{
									uni.showModal({
										content: '上传错误',
										showCancel: false
									});
								}
							},
							fail: (err) => {
								console.log('uploadImage fail', err);
								uni.showModal({
									content: '上传错误',
									showCancel: false
								});
							}
						});
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.album'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: '需要从您的相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},
		},
		onBackPress() {
			this.$refs['showpopup'].close()
			this.$refs['showtip'].close()
			this.$refs['showimage'].close()
			this.$refs['showshare'].close()
		}
	}
</script>

<style>
	.top-do-box{
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: auto;
		/* #ifdef MP-WEIXIN */
		margin-top: 120upx;
		/* #endif */
		/* #ifdef APP-PLUS */
		margin-top: 60upx;
		/* #endif */
	}
	.ico-box{
		width: 70upx;
		height: 70upx;
		text-align: center;
	}
	.ico{
		color: #FFFFFF;
		font-size: 48upx;
	}
	.lico{
		color: #FFFFFF;
		font-size: 28upx;
		margin-right: 4upx;
	}
	.do-box{
		width: 90%;
		display: flex;
		padding: 40upx 0;
		flex-wrap: nowrap;
		margin: auto;
		z-index: 9999;
	}
	.cover-box{
		width: 200upx;
		height: 200upx;
		border-radius: 10upx;
		overflow: hidden;
		position: relative;
	}
	.cover-text{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		font-size: 28upx;
		color: #FFFFFF;
	}
	.cover-box image{
		width: 100%;
		/* height: 100%; */
	}
	.do-box-check{
		padding: 20upx;
		flex: 1;
		
	}
	.check-lable{
		width: 200upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 60upx;
		background-color: rgba(0,0,0,.2);
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
	}
	.uni-input{
		background: none!important;
		color: #FFFFFF;
		font-size: 40upx;
		margin-top: 20upx;
	}
	/* 底部分享 */
	.uni-share {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		background-color: #fff;
		padding: 0 40upx;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
	}
	
	.uni-share-title {
		line-height: 60rpx;
		font-size: 24rpx;
		padding: 15rpx 0;
		text-align: center;
		border-bottom: 2upx solid #F0F0F0;
	}
	
	.uni-share-content {
		/* #ifndef APP-NVUE */
		/* display: flex; */
		/* #endif */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		/* justify-content: space-around; */
		padding: 15px 0;
		/* padding-bottom: 0; */
	}
	.content-image {
		width: 60rpx;
		height: 60rpx;
	}
	.uni-share-content-text {
		font-size: 26rpx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	.uni-share-btn {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 14px;
		border-top-color: #f5f5f5;
		border-top-width: 1px;
		border-top-style: solid;
		text-align: center;
		color: #666;
	}
	.type-lable{
		width: 20%;
		margin-left: 2.5%;
		height: 60upx;
		line-height: 60upx;
		border-radius: 60upx;
		text-align: center;
		color: #666666;
		font-size: 24upx;
		border: 2upx solid #F0F0F0;
		margin-bottom: 20upx;
	}
	.type-lable-active{
		background-color: #ff2d54;
		border: 2upx solid #ff2d54;
		color: #FFFFFF;
	}
	.ok-but{
		width: 100%;
		height: 90upx;
		line-height: 90upx;
		border-radius: 90upx;
		font-size: 28upx;
		color: #FFFFFF;
		text-align: center;
		background-color: #ff2d54;
		margin: 20upx auto;
	}
	.ok-but-none{
		background-color: #F0F0F0;
	}
	.loc-lable{
		line-height: 70upx;
		text-align: center;
		font-size: 32upx;
	}
	.loc-lable-active{
		color: #ff2d54;
	}
	.start-but{
		width: 60%;
		height: 90upx;
		line-height: 90upx;
		border-radius: 90upx;
		font-size: 36upx;
		color: #FFFFFF;
		text-align: center;
		background-color: #ff2d54;
		position: fixed;
		bottom: 100upx;
		left: 20%;
	}
</style>
